<template>
	<div class='animate-box'>
		<div class='box'>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>
</template>
<style scoped lang='scss'>
.animate-box{
	padding       :0;
	margin        :0;
	border        :0;
	height        :100px;
	width         :100%;
	display       :flex;
	flex-flow     :column nowrap;
	place-content :center center;
	place-items   :center center;
	place-self    :center center;
}
.box{
	padding       :0;
	margin        :0;
	border        :0;
	height        :100px;
	width         :100px;
	display       :flex;
	flex-flow     :row nowrap;
	place-content :center center;
	place-items   :center center;
	place-self    :center center;
}
.box span{
	padding   :0;
	margin    :0;
	border    :0;
	position  :absolute;
	width     :100px;
	height    :100px;
	animation :animate 3s linear infinite;
}
.box span::before{
	padding          :0;
	margin           :0;
	border           :0;
	position         :absolute;
	content          :'';
	background-color :#000000;
	width            :10px;
	height           :10px;
	bottom           :0;
	left             :calc(50% - 5px);
	border-radius    :50%;
}
.box span:nth-child(1){
	animation-delay :0s;
}
.box span:nth-child(2){
	animation-delay :0.1s;
}
.box span:nth-child(3){
	animation-delay :0.2s;
}
.box span:nth-child(4){
	animation-delay :0.3s;
}
.box span:nth-child(5){
	animation-delay :0.4s;
}
@keyframes animate{
	0%{
		transform :rotate(0deg);
		opacity   :1;
	}
	20%{
		transform :rotate(180deg);
		opacity   :1;
	}
	40%{
		transform :rotate(360deg);
		opacity   :1;
	}
	60%{
		transform :rotate(540deg);
		opacity   :1;
	}
	72%{
		transform :rotate(720deg);
		opacity   :0;
	}
	100%{
		transform :rotate(810deg);
		opacity   :0;
	}
}
</style>